<template>
  <view
    class="bg-white"
    :style="{ position: 'sticky', top: headerHeight - 2 + 'px', zIndex: 1, marginTop: '-2px' }"
  >
    <view class="py-12 px-16 h-36">
      <TSearch v-model="params.keyWord" placeholder="搜索姓名" @clear="handleSearchClear" />
    </view>
    <RadioTagGroup
      v-model="params.applyStatus"
      :data="statusTagList"
      @change="handleRadioTagGroupChange"
    />
  </view>
  <Paglist
    v-model="dataList"
    :is-init-api="true"
    :parame="params"
    @register="register"
    :is-show-loadmore="dataList.length > 1"
  >
    <view class="pa-16">
      <template v-for="(v, i) in dataList" :key="v.id">
        <ReceivedItem
          :id="v.id"
          :status="v.applyStatus"
          :avatar-url="v.avatar"
          :user-name="v.userName"
          :company-position-name="v.companyPositionName"
          :title="v.title"
          :application-time="v.createTime"
          :bo-type="v.boType"
          :show-data-info="false"
          time-label="提交时间："
        />
      </template>
    </view>
  </Paglist>
</template>

<script setup lang="ts">
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import ReceivedItem from '../../intentionManage/components/ReceivedItem.vue';
  import { onMounted, provide, reactive, ref, watch } from 'vue';
  import RadioTagGroup, { type TagItem } from '../../components/RadioTagGroup.vue';
  import TSearch from '@/components/TSearch/index.vue';
  import { IntentionStatusEnum } from '@/enums/businessOpportunitiesEnum';
  import { IntentionStatusText } from '../../intentionManage';
  import { getUserBoApplyReceiveNum, receiveApplyRecord } from '@/api/businessOpportunities';
  import type {
    IIntentionApplyRecordData,
    IIntentionApplyRecordResult,
  } from '@/api/businessOpportunities/type';
  import { propTypes } from '@/utils/propTypes';
  import { onShow } from '@dcloudio/uni-app';

  const props = defineProps({
    boInfoId: propTypes.number,
    headerHeight: propTypes.number,
  });

  const statusTagList = ref<TagItem[]>([
    {
      value: null,
      label: '全部',
    },
    {
      value: IntentionStatusEnum.pending,
      label: IntentionStatusText[IntentionStatusEnum.pending],
    },
    {
      value: IntentionStatusEnum.success,
      label: IntentionStatusText[IntentionStatusEnum.success],
    },
    {
      value: IntentionStatusEnum.unsuitable,
      label: IntentionStatusText[IntentionStatusEnum.unsuitable],
    },
    {
      value: IntentionStatusEnum.hold,
      label: IntentionStatusText[IntentionStatusEnum.hold],
    },
  ]);

  const params = reactive<IIntentionApplyRecordData>({
    applyStatus: statusTagList.value[0].value,
    keyWord: '',
    boInfoId: props.boInfoId,
  });

  const dataList = ref<IIntentionApplyRecordResult[]>([]);
  const [register, { refresh }] = useConList({ api: receiveApplyRecord });
  provide('api', void 0);

  function handleRadioTagGroupChange() {
    refresh();
  }

  /** 搜索 */
  function handleSearchClear() {
    refresh();
  }

  onShow(() => {
    dataList.value.length && refresh();
    queryUserBoApplyReceiveNum();
  });

  onMounted(() => {
    queryUserBoApplyReceiveNum();
  });

  const queryUserBoApplyReceiveNum = async () => {
    statusTagList.value[1].num = await getUserBoApplyReceiveNum(params.boInfoId);
  };
</script>

<style scoped></style>
